import React,{ useState, useEffect} from 'react'
import { useNavigate } from 'react-router'
import './index.css'
import codeimg from '../../../static/img/Search and Particulars/yzm.png'
import axios from 'axios'
import { message } from 'antd'
export default function Phone2() {
    const natitate = useNavigate()
    //初始化用户信息
    const [state, setstate] = useState({})
  useEffect(() => {
      axios.post("http://localhost:3001/mycenter/personald",{id:1}).then((res)=>{
          console.log(res.data);
          setstate(res.data)
      })
  }, [])
//初始化用户输入的密码
const [userpassword, setpassword] = useState({pssword1:'',password2:''})
  //获取密码
  function getPassword(e){
     const password={...userpassword}
     password.pssword1 = e.target.value
     setpassword(password)
  }
  //再次输入密码
  function getPassword2(e){
   const password={...userpassword}
   password.pssword2 = e.target.value
   setpassword(password)
 
}
//提交密码
    function nowsubmit() {
        // const phone = document.getElementsByClassName('changephone')[0].value
        // const code = document.getElementsByClassName('verification-code')[0].value
        // console.log(phone, code);
        console.log(userpassword);
        if (userpassword.pssword1===userpassword.pssword2) {
            message.success('恭喜您修改成功!!')
            axios.post("http://localhost:3001/mycenter/changepossword",{password:userpassword.pssword1}).then((res)=>{
                console.log(res);
            })
        }else{
         message.warning('密码错误!!')
        }
       
    }
    return (
        <div>
            <h3 className='tt'>设定密码</h3>
            <div className="change-middle">
                  <input type="text" className='changephone' value={state.u_user}  disabled/>
                <input type="text" className='changephone' onChange={getPassword} placeholder='请输入密码' />
                <input type="text" className='changephone' onChange={getPassword2} placeholder='请再次输入密码确认' />
                <input type="text" className='verification-code' placeholder='验证码' />
                <div className="codeimg">
                    <img src={codeimg} alt="" />&nbsp;&nbsp;&nbsp;
                    <span>看不清换一张</span>
                </div>
                <div className="phonecode">
                    <input className='phonecodeis' type="text" placeholder='手机验证码' />
                    <div className="clickcode">获取验证码</div>
                </div>
                <div className="c-submit" onClick={nowsubmit}>提交验证</div>
            </div>

        </div>
    )
}
